<div class="page-header">
    <h1>{{post.title}}</h1>
</div>

<p>by {{post.createdBy.displayName}}, at
    {{post.createdDate|date:'short'}}</p>

<p>{{post.content}}</p>

<h3>Comments({{comments.length||'0'}})</h3>
<div class="row">
    <div class="pull-right">
        <a class="btn btn-default btn-success" ng-click="addComment()"><span class="glyphicon glyphicon-plus-sign"></span> {{'addComment'|translate}}</a>
    </div>
</div>
<ul class="list-unstyled">
    <li ng-repeat="comment in comments" style="border-bottom: #ccc dotted thin !important;">
        <p><small>By {{comment.createdBy.name}} at
            {{comment.createdDate|date:'short'}}</small></p>
        <p>{{comment.content}}</p>
        <p ng-show="user.id == post.createdBy.id">
            <a class="btn btn-sm btn-default btn-danger"
               ng-click="delComment($index)"><span class="glyphicon glyphicon-remove-sign"></span> {{'delete'|translate}}</a>
        </p>
    </li>
</ul>

<uib-pagination boundary-links="true" total-items="totalItems" items-per-page="10" ng-model="p" ng-change="search()" class="pagination" previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></uib-pagination>

<div class="modal fade" id="commentDialog" tabindex="-1" role="dialog"
     aria-labelledby="commentModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form class="form form-horizontal" role="form" ng-submit="save()" name="commentForm" novalidate>
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="commentModalLabel">
                        {{'comment'|translate}}
                    </h4>
                </div>
                <div class="modal-body"> 
                    <div class="form-group" ng-class="{'has-error':commentForm.content.$invalid && !commentForm.content.$pristine }">
                        <div class="col-md-12">
                            <textarea name="content" class="form-control" type="text" placeholder="Comment on post"
                                      ng-model="newComment.content" rows="8" ng-required="true" ng-minlength="10"></textarea>
                            <p ng-show="commentForm.content.$invalid" class="help-block">At least 10 chars.</p>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" ng-disabled="commentForm.$invalid" class="btn btn-primary">
                        {{'save'|translate}}
                    </button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        {{'cancel'|translate}}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>